---
title: Content size category
---

import Seo from '../../../components/Seo.astro'
import Badge from '../../../components/Badge.astro'

<Seo
    seo={{
        title: 'Content Size Category',
        description: 'Learn how to use the content size category in react-native-unistyles'
    }}
>

<Badge label="iOS" />
<Badge label="Android" />
<Badge label="2.0.0" />

Content size category is a user preference used to adjust text size and control content magnification in your app. This feature is especially useful for users with visual impairments or limited vision.

It's also possible to use these values to build responsive layouts based on native settings rather than screen size.


### iOS 

Unistyles implementation is based on [Human Interface Guidelines](https://developer.apple.com/design/human-interface-guidelines/typography#Specifications)
and the available values are:

`xSmall`, `Small`, `Medium`, `Large`, `xLarge`, `xxLarge`, `xxxLarge`, `unspecified`

<Badge label="2.4.0" />

In addition to above categories, you can also use the [Accessibility sizes](https://developer.apple.com/documentation/uikit/uicontentsizecategory#2901207), available values are:

`accessibilityMedium`, `accessibilityLarge`, `accessibilityExtraLarge`, `accessibilityExtraExtraLarge`, `accessibilityExtraExtraExtraLarge`

### Android

There is no direct equivalent to the iOS content size category on Android. The implementation is based on [Font Scale](https://developer.android.com/reference/android/content/res/Configuration#fontScale)
and the available values are:

`Small`, `Default`, `Large`, `ExtraLarge`, `Huge`

Mapping is based on the following table:

| Version | Value | Font Scale |
| ----- | ----- | ---------- |
| - | Small | \<= 0.85       |
| - | Default | \<= 1.0       |
| - | Large | \<= 1.15       |
| - | ExtraLarge | \<= 1.3    |
| - | Huge | \<=1.5      |
| <Badge label="2.4.0" /> | ExtraHuge | \<=1.8      |
| <Badge label="2.4.0" /> | ExtraExtraHuge | >1.8      |

:::tip[Your app restarts?]
If you change the font scale in your Android settings, your app will restart by default. 
To prevent this, follow the instructions in the  [FAQ](/reference/faq/).
:::

### Web

There is no support for the content size category on the web.
Reading the value will always resolve to `unspecified`.

### Usage

To get the current `contentSizeCategory` you need to use `UnistylesRuntime`:

```tsx /contentSizeCategory/
import { UnistylesRuntime } from 'react-native-unistyles'

// check the current content size category
export const ContentSizeCategory = () => (
    <Text>
        My device is using the {UnistylesRuntime.contentSizeCategory} size.
    </Text>
)
```

For convenience, library exposes two enums to map the values mentioned above:

```tsx /AndroidContentSizeCategory/ /IOSContentSizeCategory/
import { AndroidContentSizeCategory, IOSContentSizeCategory } from 'react-native-unistyles'

// compare the current content size category based on platform
```

### Advanced usage

To build layouts based on the content size category, you can use the value in your stylesheet:

```tsx /contentSizeCategory/
import React from 'react'
import { View, Text } from 'react-native'
import { UnistylesRuntime, createStyleSheet, useStyles } from 'react-native-unistyles'

export const ContentSizeCategory = () => {
    const styles = useStyles(stylesheet, {
        contentSizeCategory: UnistylesRuntime.contentSizeCategory
    })

    return (
        <View style={styles.container}>
            <Text>
                My device is using the {UnistylesRuntime.contentSizeCategory} size.
            </Text>
        </View>
    )
}

const stylesheet = createStyleSheet(theme => ({
    container: {
        variants: {
            // for a unified experience across Android and iOS you need to map these values yourself
            contentSizeCategory: {
                xSmall: {
                    padding: theme.spacing(1),
                },
                Small: {
                    padding: theme.spacing(2),
                },
                Medium: {
                    padding: theme.spacing(3),
                },
                Large: {
                    padding: theme.spacing(4),
                },
                xLarge: {
                    padding: theme.spacing(5),
                },
                xxLarge: {
                    padding: theme.spacing(6),
                },
                xxxLarge: {
                    padding: theme.spacing(7),
                },
                unspecified: {
                    padding: theme.spacing(8),
                },
            },
        }
    },
}))
```

</Seo>
